<template>
	<div class="main add-training-plan">
		<eagle-input
			label="计划名称"
			required
			v-model="data.PlanName"
			name="PlanName"
			isInputText
		></eagle-input>
		<eagle-input
			label="培训说明"
			rows="3"
			autosize
			type="textarea"
			v-model="data.Introduce"
			isInputText
		></eagle-input>
		<eagle-date
			label="开始时间"
			required
			:date.sync="data.PlanStartTime"
		></eagle-date>
		<eagle-date
			label="截止时间"
			required
			:date.sync="data.PlanFinishTime"
		></eagle-date>
		<eagle-radio-group label="考核" v-model="data.IsCheck" direction="horizontal">
			<eagle-radio :name="true">是</eagle-radio>
			<eagle-radio :name="false">否</eagle-radio>
		</eagle-radio-group>
		<template v-if="data.IsCheck">
			<eagle-input
				label="考核类型"
				required
			>
				<template #input>
					<div>
						<eagle-radio-group v-model="data.CheckType" direction="horizontal">
							<eagle-radio
								:name="item.ID"
								v-for="item in data.CheckTypes"
								:key="item.ID"
								>{{ item.Name }}</eagle-radio
							>
						</eagle-radio-group>
						<div class="mt-5 examine-text">理论需要设置试题</div>
					</div>
				</template>
			</eagle-input>
			<eagle-input
				v-if="data.CheckType != 1"
				name="CheckChnName"
				required
				readonly
				v-model="data.CheckChnName"
				label="考核人"
				placeholder="请选择考核人"
				@click="chooseExaminePeople()"
				islink
			></eagle-input>
			<eagle-input
				v-if="data.CheckType != 2"
				name="PaperName"
				required
				readonly
				v-model="data.PaperName"
				@click="setExam()"
				label="考试"
				placeholder="请设置考试"
				islink
			></eagle-input>
		</template>

		<eagle-collapse v-if="goback" v-model="activeNames" class="mb-10">
			<van-collapse-item name="1">
				<template #title>
					<div>
						<div class="title mr-30">培训内容</div>
						<span class="title-content" v-if="data.Details"
							>已添加{{ data.Details.length }}个</span
						>
						<span class="title-content" v-else>已添加0个</span>
					</div>
				</template>
				<template #value>
					<span class="valueclass" @click.stop="add()">添加</span>
				</template>
				<div
					class="col-detail mb-10"
					v-for="(item, index) in data.Details"
					:key="index"
				>
					<span>{{ item.Name }}</span>

					<div class="col-del" @click="delResName(index)">
						<img src="@/assets/Images/AppIcon/icon_table_delete.png" />删除
					</div>
				</div>
			</van-collapse-item>
		</eagle-collapse>
		<eagle-input
			readonly
			label="培训人员"
			islink
			@click="goExamPeople('ExamUsers')"
		>
			<template #input>
				<div v-if="data.Details2 && data.Details2.length" style="color: #999">
					已选择{{ data.Details2.length }}个人员
				</div>
				<span v-else style="color: #999"> 请选择0个人员</span>
			</template>
		</eagle-input>
		<div class="bottom_submit">
			<eagle-button type="primary" @click="_submit(true)">
				提交并立即发布
			</eagle-button>
			<eagle-button type="info" @click="_submit(false)">
				暂存稍后发布
			</eagle-button>
		</div>
		<!-- 考核人 -->
		<ExaminePeople
			title="选择人员"
			:show.sync="ExaminePeopleShow"
			:selectedValue="data.CheckUserName"
			@callback="_chooseExamPeopleCb"
		></ExaminePeople>

		<!-- 选择人 -->
		<UserChoose
			title="选择人员"
			:tagData="userTagData"
			:show.sync="UserChooseShow"
			:isMulti="true"
			@callback="_chooseUserCb"
		></UserChoose>
		<!-- 培训内容 -->
		<van-popup
			v-model="ChoosePlanShow"
			closeable
			round
			position="bottom"
			:style="{ height: '80%' }"
		>
			<div class="popup-title">培训内容</div>
			<div class="popup-content">
				<ChoosePlan @CallBack="_choosePlanCb" />
			</div>
		</van-popup>
	</div>
</template>

<script>
import { formatDate, getDate } from '@/utils/getDate'
import UserChoose from "@/views/components/user/userChooseDialog.vue";
import ExaminePeople from "@/views/components/user/userChooseDialog.vue";
import UserChooseDialog from "@/views/components/user/userChooseDialog.vue";
import ChoosePlan from "@/views/components/train/trainResLib.vue";
import store from '@/store/index'
export default {
	components: {
		UserChoose,
		ExaminePeople,
		ChoosePlan,
		UserChooseDialog
	},
	data() {
		return {
			chemCode: this.$route.query.ChemCode,
			data: {Details2:[]},
			menuList: [],
			mobile: '',
			message: '',
			radio: '1',
			checkbox: false,
			checkboxGroup: [],
			value: '',
			UserChooseShow: false,
			ExaminePeopleShow: false,
			ChoosePlanShow: false,
			activeNames: ['0'],
			idx: '',
			type: '',
			goback: true,
			userTagData:[],
		}
	},
	beforeRouteLeave(to, from, next) {
		console.log(to, 'to')
		if (to.path == '/Train'||to.path=="/Train/TrainingPlanList") {
			store.commit('updataTrainingPlanData', '')
			store.commit('updataSetPlanExamData', '')
		}
		next() //继续下一步
	},

	created() {},
	activated() {
		// 列表进来刷新,编辑
		if (
			this.$route.query.id == 0 &&
			!store.state.setPlanExamData &&
			!store.state.trainingPlanData
		) {
			this.getDetail()
		} else {
			this.$set(this, 'data', store.state.trainingPlanData)
		}
		if (
			this.$route.query.id &&
			this.$route.query.key == 'edit' &&
			!store.state.setPlanExamData &&
			!store.state.trainingPlanData
		) {
			this.getEditDetail(this.$route.query.id)
		} else {
			this.$set(this, 'data', store.state.trainingPlanData)
		}

		if (this.$route.params.planData) {
			var Details = this.$route.params.planData.map((item) => {
				return {
					Code: item.Code,
					Name: item.ResName,
					Type: item.Type,
				}
			})
			if (!this.data.Details) {
				this.data.Details = []
			}
			let newArray = [...this.data.Details, ...Details]
			let newJson = []

			for (let item1 of newArray) {
				let flag = true
				for (let item2 of newJson) {
					if (item1.Code == item2.Code) {
						flag = false
					}
				}
				if (flag) {
					newJson.push(item1)
				}
				this.$set(this.data, 'Details', newJson)
				this.goback = false
				this.goback = true
			}
		}
		// 考试存在
		console.log(store.state.setPlanExamData, 'state.setPlanExamData')
		if (store.state.setPlanExamData) {
			this.data.IsSetMarkUser = true
			this.data.PaperCode = store.state.setPlanExamData.PaperCode
			this.data.PaperName = store.state.setPlanExamData.PaperName
			this.data.IsAllowedRepeatExam =
				store.state.setPlanExamData.IsAllowedRepeatExam
			this.data.RepeatExamTimes = store.state.setPlanExamData.RepeatExamTimes
			this.data.MarkUserName = store.state.setPlanExamData.MarkUserName
			this.data.MarkChnName = store.state.setPlanExamData.MarkChnName
			this.data.EvaluationValue = store.state.setPlanExamData.EvaluationValue
			this.data.EvaluationType = store.state.setPlanExamData.EvaluationType
			this.data.ExamMins = store.state.setPlanExamData.ExamMins
			this.data.ExamStartTime = store.state.setPlanExamData.ExamStartTime
			this.data.ExamEndTime = store.state.setPlanExamData.ExamEndTime
			this.data.ExamType = store.state.setPlanExamData.ExamType
			this.data.ExamName = store.state.setPlanExamData.ExamName
			this.data.ExamID = store.state.setPlanExamData.ExamID
		}

		// 考核人
		if (this.$route.params.names) {
			// CheckChnName	apple
			// CheckUserName	00001_apple2
			this.data.CheckChnName = this.$route.params.names.ChnName
			this.data.CheckUserName = this.$route.params.names.UserName
		}
	},
	methods: {
		calcTitle() {
			let id = this.data.ID
			let title = '创建培训计划'
			if (id > 0) {
				title = '编辑培训计划'
			} else {
				title = '创建培训计划'
			}
			store.commit('updateTitle', title)
		},
		getDetail() {
			this.$axios
			.get("/TrainPlan/InitNewUnion",{params:{ id: 0 }})
			.then((res) => {
				if (!res.data.CheckType) {
					res.data.CheckType = '1'
				}
				res.data.PlanStartTime = getDate(res.data.PlanStartTime)
				res.data.PlanFinishTime = getDate(res.data.PlanFinishTime)
				this.data = res.data;
				this.userTagData=[];
				this.calcTitle()
			})
		},
		getEditDetail(id) {
			this.$axios
			.get("/TrainPlan/GetUnionDetail",{params:{id}})
			.then((res) => {
				if (!res.data.CheckType) {
					res.data.CheckType = '1'
				}
				res.data.PlanStartTime = getDate(res.data.PlanStartTime)
				res.data.PlanFinishTime = getDate(res.data.PlanFinishTime)
				this.data = res.data;
				this.userTagData = this.data.Details2;
				this.calcTitle()
			})
		},
		// 选择人员
		goExamPeople() {
			// this.$router.push({
			//   name: "ExamPeople",
			//   params: {
			//     type: "type",
			//     path: "AddTrainingPlan",
			//   },
			// });
			this.UserChooseShow = true
		},

		_chooseUserCb(data) {
			this.userTagData = data;
			
			this.data.Details2 = data
		},

		_chooseExamPeopleCb(item) {
			this.data.CheckChnName = item.ChnName
			this.data.CheckUserName = item.UserName
		},
		// 选择考核人
		chooseExaminePeople() {
			this.ExaminePeopleShow = true
			// this.$router.push({
			//   name: "ExaminePeople",
			//   params: {
			//     path: "AddTrainingPlan",
			//   },
			// });
		},
		// 设置考试
		setExam() {
			// this.$router.push('/Train/setPlanExam')
			// 保存data
			store.commit('updataTrainingPlanData', this.data)
			this.$router.push({
				name: 'setPlanExam',
				params: {
					data: this.data,
				},
			})
		},
		// 选择培训内容
		add() {
			this.ChoosePlanShow = true
			// this.$router.push({
			//   name: "ChoosePlan",
			//   params: {
			//     path: "AddTrainingPlan",
			//   },
			// });
		},
		// 选择培训内容
		_choosePlanCb(param) {
			console.log(param, 'param')
			var Details = param.map((item) => {
				return {
					Code: item.Code,
					Name: item.ResName,
					Type: item.Type,
				}
			})
			if (!this.data.Details) {
				this.data.Details = []
			}
			let newArray = [...this.data.Details, ...Details]
			let newJson = []

			for (let item1 of newArray) {
				let flag = true
				for (let item2 of newJson) {
					if (item1.Code == item2.Code) {
						flag = false
					}
				}
				if (flag) {
					newJson.push(item1)
				}
				this.$set(this.data, 'Details', newJson)
				this.ChoosePlanShow = false
			}
		},
		// 删除培训
		delResName(index) {
			this.data.Details.forEach((v, i) => {
				if (i == index) {
					this.data.Details.splice(index, 1)
					this.goback = false
					this.goback = true
				}
			})
		},
		// 保存
		_submit(IsPublish) {
			if (!this.data.PlanName) {
				return this.$toast('请输入培训计划名称')
			}
			const formData = {
				IsPublish: IsPublish,
				ID: this.data.ID,
				TrainType: 'Temporary',
				VacationTime: this.data.VacationTime,
				VacationReason: this.data.VacationReason,
				IsTransOrg: this.data.IsTransOrg,
				OriginalOrgPost: this.data.OriginalOrgPost,
				NewOrgPost: this.data.NewOrgPost,
				PlanName: this.data.PlanName,
				PlanStartTime: this.data.PlanStartTime,
				PlanFinishTime: this.data.PlanFinishTime,
				IsCheck: this.data.IsCheck,
				CheckType: this.data.CheckType,
				Introduce: this.data.Introduce,
				Details: this.data.Details,
				Details2: this.data.Details2,
				CheckChnName: this.data.CheckChnName,
				CheckUserName: this.data.CheckUserName,

				PaperCode: this.data.PaperCode,
				PaperName: this.data.PaperName,
				IsAllowedRepeatExam: this.data.IsAllowedRepeatExam,
				RepeatExamTimes: this.data.RepeatExamTimes,
				IsSetMarkUser: this.data.IsSetMarkUser,
				MarkUserName: this.data.MarkUserName,
				MarkChnName: this.data.MarkChnName,
				EvaluationValue: this.data.EvaluationValue,
				EvaluationType: this.data.EvaluationType,
				ExamMins: this.data.ExamMins,
				ExamStartTime: this.data.ExamStartTime,
				ExamEndTime: this.data.ExamEndTime,
				ExamType: 5,
				ExamName: this.data.ExamName,
				ExamID: this.data.ExamID,
			}

			this.$axios
			.post("/TrainPlan/PostUnion",formData)
			.then((res) => {
				this.$toast('保存成功')
				setTimeout(() => {
					// this.$router.push('/Train')
					this.$router.go(-1)
				}, 500)
			})
		},

		// 跳转选择项
		goEquipmentItem() {
			this.$router.push('/Chemical/ChemicalItem')
		},
	},
}
</script>
<style lang="less">
.add-training-plan {
	.textarea {
		.van-field__control {
			background-color: #f8f8f8 !important;
		}
	}
}
</style>
<style lang="less" scoped>
.col-detail {
	color: #333;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.col-del {
		display: flex;
		align-items: center;
		img {
			width: 15px;
			height: 15px;
			margin-right: 5px;
		}
	}
}
.valueclass {
	color: rgb(0, 195, 224);
}
.examine-text {
	font-size: 10px;
	color: #999;
}
.title {
	display: inline-block;
	position: relative;
	color: #646566;
}
.title::before {
	position: absolute;
	left: -0.21333rem;
	color: #c03131;
	font-size: 0.37333rem;
	z-index: 999;
	content: '*';
}
.bottom_submit {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 15px;
	box-sizing: border-box;
	.van-button {
		width: 45%;
		height: 35px;
	}
}
</style>
